import React, {PureComponent} from "react";
import {Tabs, BackTop} from 'antd';
import {connect} from "react-redux";
import {actionCreators} from "../store";
import '../style.css'

const TabPane = Tabs.TabPane;

class ContentImgListComponent extends PureComponent {

    constructor(props) {
        super(props);
        this.isComponentWillUnMount = false;
        this.newTabIndex = 0;
        const panes = [
            {title: '图库列表', key: 'tab_1', closable: false}
        ];
        this.state = {
            panes,
            activeKey: panes[0].key,
        };
    }

    componentWillUnmount() {
        this.isComponentWillUnMount = true;
        clearTimeout(this.interval);
    }

    componentDidMount() {
        this.props.loadDevicesList();
        this.props.connectionWS(() => {
            if (!this.isComponentWillUnMount) {
                this.forceUpdate();
            }
        });
    }

    loadDeviceImg = (app, device) => {
        let json = {
            app,
            device
        };
        this.props.loadAPPDevicesImgList(json);
    };

    onChangeTabs = (activeKey) => {
        this.setState({activeKey});
    };

    onEditTabs = (targetKey, action) => {
        this[action](targetKey);
    };

    add = (id, content, currentAppScript) => {
        this.loadDeviceImg(currentAppScript, content);
        const panes = this.state.panes;
        const activeKey = `newTab_${this.newTabIndex++}`;
        panes.push({title: `设备[${id}]图库-${this.newTabIndex}`, content: content, key: activeKey});
        this.setState({panes, activeKey});
    };

    remove = (targetKey) => {
        let activeKey = this.state.activeKey;
        let lastIndex = -1;
        this.state.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (panes.length && activeKey === targetKey) {
            if (lastIndex >= 0) {
                activeKey = panes[lastIndex].key;
                if (lastIndex === 0) {
                    //还原索引
                    this.newTabIndex = 0;
                }
            } else {
                activeKey = panes[0].key;
            }
        }
        this.setState({panes, activeKey});
    };

    render() {
        const {devicesList, home, selectAppImgItem, appDeviceImgList} = this.props;
        return (
            <React.Fragment>
                <BackTop/>
                <Tabs
                    onChange={this.onChangeTabs}
                    activeKey={this.state.activeKey}
                    type="editable-card"
                    onEdit={this.onEditTabs}
                >
                    {this.state.panes.map((pane) => {
                        if (pane.key === 'tab_1') {
                            return <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
                                <div className={'devices-content'}>
                                    {home != null && devicesList != null && devicesList.map((item, index) => {
                                        let list = home[`rym_${item}`];
                                        if (list != null && list.length > 0) {
                                            return (<div key={index} className={'device-item-show-img'}
                                                         onClick={() => this.add(item, item, selectAppImgItem)}>
                                                <span className={'device-item-span'}>设备:{item}</span>
                                                <div className={'device-item-img'}
                                                     style={{backgroundImage: "url(http://0.0.0.0:9990/" + list[0] + ")"}}
                                                />
                                            </div>)
                                        }
                                        return null;
                                    })}
                                </div>
                            </TabPane>
                        } else {
                            return <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
                                <div className={'devices-content'}>
                                    {appDeviceImgList != null && appDeviceImgList.length > 0 && appDeviceImgList.map((item, index) => {
                                        return (<div key={item} className={'device-item-dir-img'}>
                                            <div className={'device-item-img'}
                                                 style={{backgroundImage: "url(http://0.0.0.0:9990/" + item + ")"}}
                                            />
                                        </div>)
                                    })}
                                    {
                                        appDeviceImgList != null && appDeviceImgList.length <= 0 && (
                                            <p style={{padding: '10px'}}>回去吧，该APP还没有图库...</p>)
                                    }
                                </div>
                            </TabPane>
                        }
                    })}
                </Tabs>
            </React.Fragment>
        );
    }
}

const mapState = (state, ownProps) => ({
    home: state.getIn(['home']),
    devicesList: state.getIn(['home', 'devicesList']),
    selectAppImgItem: state.getIn(['home', 'selectAppImgItem']),
    appDeviceImgList: state.getIn(['home', 'appDeviceImgList']),
});

const mapDispatch = (dispatch) => ({
    loadDevicesList() {
        dispatch(actionCreators.loadDevicesList())
    },
    connectionWS(func) {
        actionCreators.connectionWS(dispatch, func)
    },
    loadAPPDevicesImgList(json) {
        dispatch(actionCreators.loadAPPDevicesImgList(json))
    }
});

export default connect(mapState, mapDispatch)(ContentImgListComponent);
